<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
    <el-form-item label="规则名称" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="关联产品模板" prop="mould">
      <el-select v-model="ruleForm.mould" placeholder="请选择关联产品模板" style="width:100%">
        <el-option v-for="(item,index) in dictList.moulds" :key="index" :label="item.label" :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="解析规则类型" prop="type">
      <el-radio-group v-model="ruleForm.type">
        <el-radio-button label="JSON"></el-radio-button>
        <el-radio-button label="GROK"></el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="存储策略" prop="save">
      <el-radio-group v-model="ruleForm.save">
        <el-radio :label="1">存为一条</el-radio>
        <el-radio :label="2">存为多条</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="原始日志" prop="sourceTemplateName">
      <el-input
        type="textarea"
        :rows="3"
        placeholder="请输入原始日志"
        v-model="ruleForm.sourceTemplateName"
      >
      </el-input>
    </el-form-item>
    <el-form-item label="GROK表达式" prop="express">
      <el-input
        type="textarea"
        :rows="3"
        placeholder="请输入GROK表达式"
        v-model="ruleForm.express"
      >
      </el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'step1',
  props:{
    ruleForm:{
      type:Object,
      default(){
        return {
        }
      }
    }
  },
  data() {
    return {
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        mould: [
          { required: true, message: '请选择关联产品模板', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择解析规则类型', trigger: 'blur' }
        ],
        save: [
          { required: true, message: '请选择存储策略', trigger: 'blur' }
        ],
        journal: [
          { required: true, message: '请输入原始日志', trigger: 'blur' }
        ],
        express: [
          { required: true, message: '请输入GROK表达式', trigger: 'blur' }
        ]
      },
      dictList: {
        moulds: [{
          label: '检测器',
          value: 'jcq'
        }, {
          label: '泓科-敏感信息',
          value: 'mgxx'
        }, {
          label: '泓科-刻录审计',
          value: 'klsj'
        }, {
          label: '泓科-打印审计',
          value: 'dysj'
        }, {
          label: 'IP冲突',
          value: 'ipct'
        }, {
          label: '华为防火墙',
          value: 'hwfhq'
        }]
      }
    }
  },
  methods: {
    trigger() {
      this.submitForm('ruleForm')
    },
    submitForm() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            resolve(true)
            return true
          } else {
            console.log('error submit!!')
            reject('error submit!!')
            return false
          }
        })
      })

    }
  }
}
</script>

<style scoped>
.demo-ruleForm {
  width: 90%;
  margin-top: 30px;
}
</style>
